<template>
  <div class="vuex-test">
    <h2>Vuex Module 测试页 (demo)</h2>

    <!-- 消息展示与修改 -->
    <div class="row">
      <div class="label"><strong>消息内容：</strong>{{ message }}</div>
      <input v-model="newMessageInput" placeholder="输入新消息"/>
      <button @click="updateMessage">更新消息</button>
    </div>

    <!-- 同步计数器 -->
    <div class="row">
      <div class="label"><strong>当前计数：</strong>{{ count }}</div>
      <button @click="INCREMENT">+1</button>
    </div>

    <!-- 异步计数器 -->
    <div class="row">
      <div class="label"><strong>双倍计数：</strong>{{ doubleCount }}</div>
      <button @click="incrementAsync">异步 +1</button>
    </div>
  </div>
</template>

<script>
import {mapActions, mapGetters, mapMutations, mapState} from 'vuex';

export default {
  data() {
    return {
      newMessageInput: '',
    };
  },

  computed: {
    ...mapState('demo', ['message', 'count']),
    ...mapGetters('demo', ['doubleCount']),
  },

  methods: {
    /**
     * 自定义方法：更新消息
     */
    updateMessage() {
      const msg = this.newMessageInput.trim();
      if (msg) {
        this.updateMessage(msg); // 确保只传入字符串，不传入事件对象
        this.newMessageInput = ''; // 清空输入框
      }
    },
    ...mapMutations('demo', ['INCREMENT']),
    ...mapActions('demo', ['incrementAsync']),
  },
};
</script>

<style scoped>
.vuex-test {
  font-family: Arial, sans-serif;
  padding: 20px;
}

.row {
  margin-bottom: 20px;
}

.label {
  margin-right: 10px;
}

input {
  padding: 5px;
  margin-right: 10px;
  width: 200px;
}

button {
  padding: 5px 10px;
}
</style>